<template>
  <div class="home">
    <van-sticky>
      <div class="search-top">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          shape="round"
        >
          <template #action>
            <div @click="onSearch" class="btn-most">
              <div>
                <img src="../assets/most.png" alt="" />
                <p>分类</p>
              </div>
            </div>
          </template>
        </van-search>
      </div>
      <div class="content">
        <van-tabs
          line-width="60px"
          type="line"
          title-active-color="#e4393c"
          title-background-color="skyblue"
          color="transparent"
          v-model="active"
        >
          <van-tab title="标签 1"></van-tab>
          </van-tabs
        >
        <div>
          <router-view></router-view>
        </div>
      </div>
    </van-sticky>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      value: "",
      active: 0,
      navData:[]
    };
  },
  created() {
    this.getNavData()
  },
  methods: {
    onSearch() {},
    getNavData() {
      this.axios({
        method:'get',
        url:"/Banner"
      }).then((result) =>{
        // console.log(result.data.data);
        this.navData = result.data.data
      }).catch((err) =>{
        console.log(err);
      })
    }
  },
};
</script>

<style lang="less" scoped>
.van-search__action {
  background-color: #dcdcdc;
  border-radius: 20px;
  width: 50px;
  height: 24px;
  font-size: 12px;
  color: white;
  padding: 0;
  margin-left: 10px;
  div {
    line-height: 25px;
    text-align: center;
    margin-left: 3px;
  }
  img {
    width: 15px;
    height: 15px;
    // margin-top: 7px;
    padding: 3px 0;
    float: left;
  }
  p {
    display: inline-block;
    // margin-bottom: 10px;
    margin: 0;
    float: left;
    // height: 30px;
  }
}
.van-search .van-cell {
  padding: 0;
  padding-right: 10px;
}
.van-search__content--round {
  background-color: #f5f5f5;
  color: white;
}
.van-field__control {
  color: red;
}

</style>